/**
 * 应用头部组件
 * 提供统一的头部导航和状态显示功能
 * 
 * 主要功能：
 * - 显示应用标题或页面标题
 * - 显示用户学习统计数据（连续天数、经验值等）
 * - 支持左侧图标按钮（如个人资料、返回等）
 * - 支持右侧操作按钮
 * - 遵循绝对定位和固定高度规范
 * 
 * 作者：AI语言学习应用开发团队
 * 创建时间：2024年
 * 更新时间：2024年
 */
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { NumberUtils } from '../utils/CommonUtils';

/**
 * 应用头部组件
 * @param {Object} props - 组件属性
 * @param {string} props.title - 头部标题文本
 * @param {Object} props.userStats - 用户统计数据对象
 * @param {number} props.userStats.currentStreak - 当前连续学习天数
 * @param {number} props.userStats.totalXP - 总经验值
 * @param {Function} props.onLeftPress - 左侧图标点击回调函数
 * @param {string} props.leftIcon - 左侧图标名称（Ionicons）
 * @param {Function} props.onRightPress - 右侧图标点击回调函数
 * @param {string} props.rightIcon - 右侧图标名称（Ionicons）
 * @param {boolean} props.showStats - 是否显示用户统计信息
 * @param {Object} props.style - 自定义样式对象
 * @param {string} props.backgroundColor - 背景颜色，默认为多邻国绿色
 */
export function AppHeader({
  title = '英语学习',
  userStats = {},
  onLeftPress,
  leftIcon = 'person-circle-outline',
  onRightPress,
  rightIcon,
  showStats = true,
  style,
  backgroundColor = '#58CC02'
}) {
  // 安全地获取用户统计数据，提供默认值
  const currentStreak = userStats.currentStreak || 0;
  const totalXP = userStats.totalXP || 0;

  return (
    <View style={[styles.header, { backgroundColor }, style]}>
      {/* 左侧区域 - 图标或标题 */}
      <View style={styles.leftSection}>
        {onLeftPress && leftIcon ? (
          <TouchableOpacity 
            style={styles.iconButton} 
            onPress={onLeftPress}
            activeOpacity={0.7}
          >
            <Ionicons name={leftIcon} size={24} color="#fff" />
          </TouchableOpacity>
        ) : (
          <Text style={styles.headerTitle}>{title}</Text>
        )}
      </View>

      {/* 中间标题区域（当有左侧按钮时显示） */}
      {onLeftPress && (
        <View style={styles.centerSection}>
          <Text style={styles.headerTitle}>{title}</Text>
        </View>
      )}

      {/* 右侧区域 - 统计信息或操作按钮 */}
      <View style={styles.rightSection}>
        {showStats && !onRightPress ? (
          // 显示用户统计信息
          <View style={styles.statsContainer}>
            {/* 连续学习天数 */}
            <View style={styles.statItem}>
              <Ionicons name="flame" size={18} color="#FF9500" />
              <Text style={styles.statText}>{currentStreak}</Text>
            </View>
            {/* 总经验值 */}
            <View style={styles.statItem}>
              <Ionicons name="diamond" size={16} color="#1CB0F6" />
              <Text style={styles.statText}>{NumberUtils.formatWithCommas(totalXP)}</Text>
            </View>
          </View>
        ) : onRightPress && rightIcon ? (
          // 显示右侧操作按钮
          <TouchableOpacity 
            style={styles.iconButton} 
            onPress={onRightPress}
            activeOpacity={0.7}
          >
            <Ionicons name={rightIcon} size={24} color="#fff" />
          </TouchableOpacity>
        ) : null}
      </View>
    </View>
  );
}

/**
 * 学习页面专用头部组件
 * 包含关闭按钮、进度条和心跳显示
 * @param {Object} props - 组件属性
 * @param {Function} props.onClose - 关闭按钮点击回调
 * @param {number} props.progress - 学习进度（0-1）
 * @param {number} props.hearts - 剩余心跳数量
 * @param {number} props.maxHearts - 最大心跳数量，默认3
 * @param {Object} props.style - 自定义样式
 */
export function LessonHeader({
  onClose,
  progress = 0,
  hearts = 3,
  maxHearts = 3,
  style
}) {
  return (
    <View style={[styles.lessonHeader, style]}>
      {/* 关闭按钮 */}
      <TouchableOpacity 
        onPress={onClose} 
        style={styles.closeButton}
        activeOpacity={0.7}
      >
        <Ionicons name="close" size={24} color="#fff" />
      </TouchableOpacity>
      
      {/* 中间进度条区域 */}
      <View style={styles.progressContainer}>
        <View style={styles.progressBar}>
          <View 
            style={[
              styles.progressFill, 
              { width: `${Math.max(0, Math.min(100, progress * 100))}%` }
            ]} 
          />
        </View>
      </View>
      
      {/* 右侧心跳显示 */}
      <View style={styles.heartsContainer}>
        {Array.from({ length: maxHearts }, (_, index) => (
          <Ionicons
            key={index}
            name={index < hearts ? "heart" : "heart-outline"}
            size={20}
            color={index < hearts ? "#FF6B6B" : "rgba(255,255,255,0.5)"}
            style={styles.heartIcon}
          />
        ))}
      </View>
    </View>
  );
}

/**
 * 个人资料页面头部组件
 * 显示用户信息和等级进度
 * @param {Object} props - 组件属性
 * @param {string} props.username - 用户名
 * @param {number} props.level - 用户等级
 * @param {number} props.currentLevelXP - 当前等级经验值
 * @param {number} props.nextLevelXP - 下一等级所需经验值
 * @param {Function} props.onSettingsPress - 设置按钮点击回调
 */
export function ProfileHeader({
  username = '语言学习者',
  level = 1,
  currentLevelXP = 0,
  nextLevelXP = 100,
  onSettingsPress
}) {
  // 计算等级进度百分比
  const progressPercentage = nextLevelXP > 0 ? (currentLevelXP / nextLevelXP) * 100 : 0;

  return (
    <View style={styles.profileHeader}>
      <View style={styles.profileSection}>
        {/* 用户头像区域 */}
        <View style={styles.avatarContainer}>
          <Ionicons name="person" size={40} color="#fff" />
        </View>
        
        {/* 用户信息区域 */}
        <View style={styles.profileInfo}>
          <Text style={styles.username}>{username}</Text>
          <Text style={styles.levelText}>等级 {level}</Text>
        </View>
        
        {/* 设置按钮 */}
        {onSettingsPress && (
          <TouchableOpacity 
            style={styles.settingsButton} 
            onPress={onSettingsPress}
            activeOpacity={0.7}
          >
            <Ionicons name="settings-outline" size={24} color="#fff" />
          </TouchableOpacity>
        )}
      </View>
      
      {/* 等级进度条 */}
      <View style={styles.levelProgressContainer}>
        <View style={styles.levelProgressHeader}>
          <Text style={styles.levelProgressText}>
            等级 {level} 进度
          </Text>
          <Text style={styles.xpText}>
            {currentLevelXP}/{nextLevelXP} 经验值
          </Text>
        </View>
        <View style={styles.levelProgressBar}>
          <View 
            style={[
              styles.levelProgressFill, 
              { width: `${Math.max(0, Math.min(100, progressPercentage))}%` }
            ]} 
          />
        </View>
      </View>
    </View>
  );
}

// 样式定义
const styles = StyleSheet.create({
  // 通用头部样式
  header: {
    height: 60, // 固定高度60px（遵循内存规范）
    paddingHorizontal: 20,
    paddingVertical: 15,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    elevation: 3,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 3,
    zIndex: 1000, // 确保头部在最上层
  },
  
  // 左侧区域
  leftSection: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
  },
  
  // 中间区域
  centerSection: {
    flex: 2,
    alignItems: 'center',
    justifyContent: 'center',
  },
  
  // 右侧区域
  rightSection: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end',
  },
  
  // 头部标题
  headerTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#fff',
  },
  
  // 图标按钮
  iconButton: {
    padding: 5,
    borderRadius: 20,
  },
  
  // 统计信息容器
  statsContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  
  // 单个统计项
  statItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 16,
  },
  
  // 统计文本
  statText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '600',
    marginLeft: 4,
  },
  
  // 课程学习页面头部
  lessonHeader: {
    backgroundColor: '#58CC02',
    height: 60,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    paddingVertical: 15,
    elevation: 5,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
  
  // 关闭按钮
  closeButton: {
    padding: 5,
    width: 40,
    alignItems: 'center',
  },
  
  // 进度条容器
  progressContainer: {
    flex: 1,
    alignItems: 'center',
    paddingHorizontal: 20,
  },
  
  // 进度条背景
  progressBar: {
    width: '100%',
    height: 8,
    backgroundColor: 'rgba(255,255,255,0.3)',
    borderRadius: 4,
    overflow: 'hidden',
  },
  
  // 进度条填充
  progressFill: {
    height: '100%',
    backgroundColor: '#fff',
    borderRadius: 4,
  },
  
  // 心跳容器
  heartsContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    width: 80,
    justifyContent: 'flex-end',
  },
  
  // 心跳图标
  heartIcon: {
    marginLeft: 5,
  },
  
  // 个人资料头部
  profileHeader: {
    backgroundColor: '#58CC02',
    padding: 20,
    borderBottomLeftRadius: 25,
    borderBottomRightRadius: 25,
  },
  
  // 个人资料区域
  profileSection: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20,
  },
  
  // 头像容器
  avatarContainer: {
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: 'rgba(255,255,255,0.2)',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 20,
  },
  
  // 个人信息
  profileInfo: {
    flex: 1,
  },
  
  // 用户名
  username: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 5,
  },
  
  // 等级文本
  levelText: {
    fontSize: 16,
    color: 'rgba(255,255,255,0.9)',
  },
  
  // 设置按钮
  settingsButton: {
    padding: 8,
    borderRadius: 20,
  },
  
  // 等级进度容器
  levelProgressContainer: {
    marginTop: 10,
  },
  
  // 等级进度头部
  levelProgressHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 10,
  },
  
  // 等级进度文本
  levelProgressText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#fff',
  },
  
  // 经验值文本
  xpText: {
    fontSize: 14,
    color: 'rgba(255,255,255,0.9)',
  },
  
  // 等级进度条
  levelProgressBar: {
    height: 10,
    backgroundColor: 'rgba(255,255,255,0.3)',
    borderRadius: 5,
    overflow: 'hidden',
  },
  
  // 等级进度填充
  levelProgressFill: {
    height: '100%',
    backgroundColor: '#FFD700',
    borderRadius: 5,
  },
});